<template>
    <div style="height:500px">
        <rx-fit>
            <a-tabs v-model="currentTab" @change="handleTabChange" type="card">
                <a-tab-pane v-for="v in icons" :tab="v.title" :key="v.key">
                    <ul>
                        <li v-for="(icon, key) in v.icons" :key="`${v.key}-${key}`"
                            :class="{ 'active': selectedIcon == icon }" @click="handleSelectedIcon(v.key, icon)">
                            <my-icon :type="icon" v-if="v.key == 'jpaasIcon'" :style="{ fontSize: '36px' }"></my-icon>
                            <custom-icon :type="icon" v-if="v.key == 'customIcon'" :style="{ fontSize: '36px' }" />
                            <a-icon :type="icon" v-else :style="{ fontSize: '36px' }" />
                        </li>
                    </ul>
                </a-tab-pane>
            </a-tabs>
        </rx-fit>
    </div>
</template>

<script>
import icons from './icons'
import {RxFit} from "@lowcode/jpaas-common-lib"
export default {
    name: 'IconSelect',
    components: {
        RxFit,
    },
    props: {
        prefixCls: {
            type: String,
            default: 'ant-pro-icon-selector'
        },
        // eslint-disable-next-line
        value: {
            type: String
        }
    },
    data() {
        return {
            selectedIcon: this.value || '',
            currentTab: 'jpaasIcon',
            icons,
        }
    },
    watch: {
        value(val) {
            this.selectedIcon = val
            this.autoSwitchTab()
        }
    },
    created() {
        this.init();
        if (this.value) {
            this.autoSwitchTab()
        }
    },
    methods: {
        init() {
            var baseURL = process.env.VUE_APP_ADMIN_FRONT;
            var _url1 = baseURL !== "/" ? `${baseURL}/iconfont/iconfont.css` : `/iconfont/iconfont.css`;
            var _url2 = baseURL !== "/" ? `${baseURL}/customIcon/iconfont.css` : `/customIcon/iconfont.css`;

            //多个标签下使用
            //使用 Promise.all 并行加载两个图标字体文件
            Promise.all([
                this.getIconfont(_url1),
                this.getIconfont(_url2)
            ]).then(([res1, res2]) => {
                // 更新 jpaasIcon 的图标
                this.icons.find(item => item.key === 'jpaasIcon').icons = res1;
                // 更新 customIcon 的图标
                this.icons.find(item => item.key === 'customIcon').icons = res2;
            }).catch(error => {
                console.error('Failed to load icon fonts:', error);
            });


            //单个tab
            // Promise.all([
            //     this.getIconfont(_url1),
            //     this.getIconfont(_url2)
            // ]).then(([res1, res2]) => {
            //     // 合并两个图标数组
            //     const mergedIcons = [...res1, ...res2];

            //     // 找到 jpaasIcon 对应的对象
            //     const jpaasIconObj = this.icons.find(item => item.key === 'jpaasIcon');

            //     // 更新 jpaasIcon 的图标
            //     jpaasIconObj.icons = mergedIcons;
            // }).catch(error => {
            //     console.error('Failed to load icon fonts:', error);
            // });
        },
        getIconfont(url) {
            return new Promise(function (resolve, reject) {
                let xhr = new XMLHttpRequest();
                xhr.open('GET', url);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        let ary = [];
                        var data = xhr.responseText;
                        var myregexp = /\.(.+):before/mg;
                        var match = myregexp.exec(data);
                        while (match != null) {
                            ary.push(match[1]);
                            match = myregexp.exec(data);
                        }
                        resolve(ary);
                    }
                };
                xhr.send();
            });
        },
        handleSelectedIcon(key, icon) {
            this.selectedIcon = icon
            this.$emit('change', { type: key, icon: icon })
        },
        handleTabChange(activeKey) {
            this.currentTab = activeKey
        },
        autoSwitchTab() {
            icons.some(item => item.icons.some(icon => icon === this.value) && (this.currentTab = item.key))
        }
    }
}
</script>

<style lang="less" scoped>
@import "../index.less";

ul {
    list-style: none;
    padding: 0;
    margin-bottom: 50px;
    overflow-y: scroll;

    li {
        display: inline-block;
        padding: @padding-sm;
        margin: 3px 0;
        border-radius: @border-radius-base;

        &:hover,
        &.active {
            // box-shadow: 0px 0px 5px 2px @primary-color;
            cursor: pointer;
            color: @white;
            background-color: @primary-color;
        }
    }
}
</style>
